<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>qq音乐</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/swiper.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="shortcut icon" href="images/favicon.ico">
	</head>

	<body>
		<!--首页-->
		<div class="web_wrap">
			<!--头部-->
			<header>
				<div class="nav">
					<div class="i_wrap"></div>
					<a href="javascript:''" class="down_link">下载APP</a>
				</div>
				<div class="sele">
					<a href="javascript:;" class="current">推荐</a>
					<a href="javascript:;">排行榜</a>
					<a href="javascript:;">搜索</a>
				</div>
			</header>
			<!--内容页1-->
			<div class="content tab_1 content_open">
				<!--轮播图-->
				<div class="swiper-container">
					<div class="swiper-wrapper">
					</div>
					<div class="swiper-pagination"></div>
				</div>
				<!--轮播图结束-->
				<!--电台-->
				<div class="radio_wrap">
					<h2 class="list_title">电台</h2>
					<ul id="radio_wrapper" class="list_container clearfix">
					</ul>
				</div>
				<!--电台结束-->
				<!--热门歌单-->
				<div class="hot_music">
					<h2 class="list_title">热门歌单</h2>
					<ul id="songlist_wrapper" class="list_container clearfix">
					</ul>
					<p class="list_more">
						<a href="javascript:;">去客户端发现更多好音乐 &gt;</a>
					</p>
				</div>
				<!--热门歌单结尾-->
				<!--脚部-->
				<footer class="mod_footer">
				    <div class="version_tab">
				        <a data-tjname="go_pc" href="http://y.qq.com/?ADTAG=myqq&amp;nomobile=1#type=index">查看电脑版网页</a>
				    </div>
				    <div class="footer_logo">QQ音乐</div>
				    <p class="copyright">Copyright © 1998 - <span id="js_cpright_year">2018</span> Tencent. All Rights Reserved.</p>
				    <p id="js_iosinfo" class="copyright">联系电话：0755-86013388 QQ群：55209235</p>
				</footer>
				<!--脚部结束-->
			</div>
			<!--结束-->
			<!--内容页2-->
			<div class="ranking_list tab_1">
				<ul class="ranking_l_wrap">
				</ul>
				<p class="topic_more"><a href="javascript:;">去客户端发现更多好音乐 &gt;</a></p>
			</div>
			<!--结束-->
			<!--搜索页-->
			<div class="seach_wrap tab_1">
				<!--搜索框-->
			    <div class="mod_search_bar">
			        <div id="input_wrap" class="search_bar_cont">
			            <form id="search_form" method="get" action="#" onsubmit="return false">
			                <input id="search_input" class="search_input" type="search" autocomplete="off" style="-webkit-appearance: textfield;" autocorrect="off" placeholder="搜索歌曲、歌单、专辑">
			                <span class="icon icon_search">搜索</span>
			                <span id="del_btn" class="icon icon_delete">删除</span>
			            </form>
			        </div>
			        <div id="cancel_btn" class="search_bar_tip_text" style="">取消</div>
    			</div>
    			<!--搜索框结束-->
    			<!--热词-->
    			<div id="hot_keys" class="mod_search_result">
					<h3 class="result_tit">热门搜索</h3>
					<div class="result_tags">
					    <a href="https://y.qq.com/m/act/voiceofdreams2/v3/index.html?ADTAG=myqq" class="tag_s tag_hot">梦想的声音第二季</a>
					</div>
					</div>
    			<!--热词结束-->
			</div>
			<!--结束-->
		</div>
	</body>
	<script src="js/xml.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ranking.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/seach.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
				
				loop: false,
				speed:800,
				autoplay: {
					delay: 900,
//					stopOnLastSlide: false,
//  				disableOnInteraction: true,
				},
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},
				observer:true,
				observeParents:true
			})
		function tab(){
			var sele = document.querySelectorAll(".sele a");
			var div_con = document.querySelectorAll(".tab_1");
			sele.forEach(function(el,index){
				el.addEventListener("click",function(){
					for(var i=0;i<div_con.length;i++){
						div_con[i].classList.remove("content_open");
						sele[i].classList.remove("current")
					}
					el.classList.add("current")
					div_con[index].classList.add("content_open")
				})
			})
		}
		tab()
	</script>

</html>